<div id="score-detail-dom">
    <p></p>
    <div class="row">

        <div class="panel col-md-6">
            <div class="panel-heading">学员信息</div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item">学号：{{detailInfo.student.studentNo}}</li>
                    <li class="list-group-item">姓名：{{detailInfo.student.studentName}}</li>
                    <li class="list-group-item">电话：{{detailInfo.student.studentTel}}</li>
                </ul>
            </div>
        </div>

        <div class="panel col-md-6">
            <div class="panel-heading">模板信息</div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item">模板名称：{{detailInfo.template.templateName}}</li>
                    <li class="list-group-item">模板说明：{{detailInfo.template.templateDesc}}</li>

                </ul>
            </div>
        </div>
    </div>

    <div class="row">

        <div id="tableBox" class="col-md-6" style="height:400px;">
            <!-- 图表 -->
        </div>
        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item">总分:{{detailInfo.testScore.score}}</li>
                <li class="list-group-item" v-for="item in templateItemAndScore">
                    {{item.itemName}} : {{item.itemScore}}
                </li>
            </ul>
        </div>

    </div>
</div>

<script>
    let scoreDetailApp = Vue.createApp({
        data() {
            return {
                templateItemAndScore: [],
                detailInfo: {
                    student: {},
                    scoreItems: [],
                    template: {},
                    testScore: {}
                },
                option: {
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    title: {
                        //text:''
                    },
                    tooltip: {},
                    legend: {
                        //data:[]
                    },
                    radar: {
                        indicator: [
                            // { name: '理论知识', max: 100 },// 项目的名字和项目的最大值
                            // { name: '驾驶意识', max: 100 },
                            // { name: '实际操作水平', max: 80 },
                            // { name: '安全意识', max: 1000 },
                            // { name: '身体素质', max: 800 }
                        ]
                    },
                    series: [
                        {
                            name: '',
                            type: 'radar',
                            data: [
                                //{value:[50,50,50,50,50],name:'成绩'}
                            ]
                        }
                    ]
                }
            }
        },
        mounted() {
            axios.get("http://localhost:8080/testScore/detail", { params: { scoreId: window.scoreId } }).then((res) => {
                
                this.detailInfo = res.data.data
                //
                let detailChart = echarts.init($('#tableBox')[0])
                //title
                this.option.title = { text: this.detailInfo.student.studentName + "的" + this.detailInfo.testScore.scoreName + "测评成绩" }
                // 
                this.option.legend = { data: ["你的成绩", "平均成绩"] }
                //radar 的数据
                let radars = []
                for (let i = 0; i < this.detailInfo.template.templateItems.length; i++) {
                    //遍历 templateItems 取出每一个模板项
                    let templateItem = this.detailInfo.template.templateItems[i]

                    radars.push({ name: templateItem.itemName, max: templateItem.itemMaxScore })

                }
                //
                this.option.radar = { indicator: radars }

                //series 的数据
                let seriesData = []
                // values数据
                let values = []
                //平均数
                let avgValues = []
                //遍历模板项

                for (let x = 0; x < this.detailInfo.template.templateItems.length; x++) {
                    let templateItem = this.detailInfo.template.templateItems[x]
                    // 遍历成绩项列表
                    for (let j = 0; j < this.detailInfo.scoreItems.length; j++) {

                        let scoreItem = this.detailInfo.scoreItems[j];

                        if (scoreItem.templateItemId == templateItem.itemid) {
                            //值放入数组
                            values.push(scoreItem.score);
                            //给this.templateItemAndScore
                            this.templateItemAndScore.push({ itemName: templateItem.itemName, itemScore: scoreItem.score });
                        }
                    }

                    //平均成绩
                    for (let x = 0; x < this.detailInfo.scoreAvgs.length; x++) {

                        var scoreAvg = this.detailInfo.scoreAvgs[x];
                        //因为传过来数据无序   按itemId存入数组
                        if (scoreAvg.templateItemId == templateItem.itemid) {
                            avgValues.push(scoreAvg.avg);
                        }
                    }

                }

                let dataObj = {value:values,name:"你的成绩"};
                let avgObj = {value:avgValues,name:"平均成绩"};
                seriesData.push(dataObj);
                seriesData.push(avgObj);
                this.option.series[0].data=seriesData

                console.log(this.option)
                detailChart.setOption(this.option)
            });
        },
    })
    scoreDetailApp.mount("#score-detail-dom");
</script>